<template>
    <div class="page">
        <div class="card-info">
            <div class="card-title">
                {{ article.title }}
            </div>
            <div class="card-other">
                <div class="card-author">
                    <el-icon><User/></el-icon>
                    <span style="margin-left: 5px">{{ article.username }}</span>
                </div>
                <div class="card-type">
                    <el-icon><Notebook/></el-icon>
                    <span style="margin-left: 5px">{{ article.typeName }}</span>
                </div>
                <div class="card-date">
                    <el-icon><Timer/></el-icon>
                    <span style="margin-left: 5px">{{ article.publishTime }}</span>
                </div>
                <div class="card-read">
                    <el-icon><View/></el-icon>
                    <span style="margin-left: 5px">{{ article.readCount }}</span>
                </div>
                <div class="cart-edit" v-if="loginState">
                    <el-link type="primary" @click="toUpdate">编辑</el-link>
                </div>
            </div>
        </div>
        <div class="card-abstr">
            <el-input v-model="article.abstraction" disabled placeholder="文章摘要" />
        </div>
        <md-editor editorClass="editor-class" previewOnly v-model="article.rawContent"/>
    </div>
</template>

<script>
    import MdEditor from 'md-editor-v3';
    import 'md-editor-v3/lib/style.css';
    import {getArticle} from "../../api";
    import {ref, reactive, onMounted} from 'vue';
    import { useRouter,useRoute } from "vue-router";
    import {User, Notebook, Timer, StarFilled, View} from '@element-plus/icons'
    import vHeader from "./Header.vue";
    import {ElLoading} from "element-plus";
    export default {
        name: "Article",
        props: {
            id: Number
        },
        components: {
            MdEditor,
            vHeader,
            User,
            Notebook,
            Timer,
            StarFilled,
            View
        },
        setup(props) {
            const router = useRouter();
            const htmlContent = ref('');
            const title = ref('');
            const type = ref('');
            const article = ref({
                id: 1,
                title: "",
                abstract: "",
                author: "",
                type: "",
                publishTime: "",
                readCount: 0,
                rawContent: "",
            });
            const loginState = ref(false);

            onMounted(() => {
               const loadingInstance = ElLoading.service({});
                if (localStorage.getItem("username")) {
                    loginState.value = true;
                }
               getArticle(props.id).then(res => {
                   if (res.code === 200) {
                       article.value = res.data;
                   }
               }).finally(
                   loadingInstance.close()
               );
            });


            const toUpdate = () => {
                router.push({
                    name:'EditorUpdate',
                    params: {
                        id: props.id
                    }
                });
            };
            return {
                article,
                htmlContent,
                title,
                type,
                loginState,
                toUpdate
            }
        }
    }
</script>

<style scoped>
    .page {
        margin-right: 10px;
        margin-left: 10px;
        width: 76vw;
        background-color: rgba(255, 255, 255, 0.9);
    }
    .header {
        z-index: 100;
    }
    #md-editor-v3 {
        background-color: rgba(255, 255, 255, 0.9);
    }
    .editor-class {
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        padding: 15px;
        width: 76vw;
        display: block;
    }
    .card-info {
        display: block;
        width: calc(100% - 40px);
        /*height: 20vh;*/
        padding: 0 20px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        font-size: 20px;
        color: #606266;
        vertical-align: top;
    }

    .card-title {
        width: 98%;
        padding-top: 4vh;
        font-size: 28px;
        color: #303133;
        /*text-overflow: ellipsis;*/
        /*overflow: hidden;*/
        white-space: nowrap;
        padding-bottom: 2vh;
    }

    .card-abstr {
        /*width: 90%;*/
        height: 7vh;
        min-height: 50px;
        padding: 1vh;
        font-size: 20px;
        color: #665a5b;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        background-color: white;
    }

    .card-author,
    .card-type,
    .card-date,
    .card-read,
    .cart-edit{
        display: inline-block;
        font-size: 16px;
        color: #909399;
    }

    .card-type,
    .card-date,
    .card-read{
        margin-left: 1vw;
    }
    .card-other {
        margin-bottom: 2vh;
    }
    .cart-edit {
        float: right;
    }
</style>